<template>
  <view class="slide-btn">
    <!-- 滑动容器 -->
    <movable-area class="slide-btn__area" ref="area">
      <movable-view 
        class="slide-btn__thumb" 
        direction="horizontal"  
        :x="thumbX"         
        @change="onSlide"   
        :disabled="isDisabled"
      >
        完成订单
      </movable-view>
    </movable-area>
  </view>
</template>

<script>
export default {
  data() {
    return {
      thumbX: 0,         // 滑块初始位置（水平）
      areaWidth: 0,      // 滑动容器宽度（动态计算）
      thumbWidth: 80,    // 滑块宽度（单位：px，可调整）
      isDisabled: false  // 是否禁用滑动
    }
  },
  onReady() {
    // 动态计算滑动容器的宽度（确保适配不同设备）
    const query = uni.createSelectorQuery().in(this);
    query.select('.slide-btn__area').boundingClientRect(res => {
      this.areaWidth = res.width;
    }).exec();
  },
  methods: {
    onSlide(e) {
      // e.detail.x 是滑块当前水平位置（相对于容器左侧）
      const currentX = e.detail.x;
      // 滑动触发条件：滑块右侧到达容器右侧（x ≥ 容器宽 - 滑块宽）
      if (currentX >= this.areaWidth - this.thumbWidth) {
        this.isDisabled = true; // 禁用滑块，防止重复触发
        this.thumbX = this.areaWidth - this.thumbWidth; // 固定到最右侧
        // 这里写「完成订单」的业务逻辑（如接口请求、页面跳转等）
        uni.showToast({ title: '订单提交成功！', icon: 'success' });
      }
    }
  }
}
</script>

<style scoped>
.slide-btn {
  width: 320px;        /* 按钮整体宽度，可调整 */
  margin: 20px auto;   /* 居中展示 */
}

/* 滑动容器：灰色背景 */
.slide-btn__area {
  width: 100%;
  height: 40px;
  background-color: #EBEBEB;
  border-radius: 20px; /* 圆角 */
  overflow: hidden;    /* 隐藏滑块超出部分 */
}

/* 滑块：绿色背景 + 文字 */
.slide-btn__thumb {
  width: 80px;         /* 与 data 中 thumbWidth 保持一致 */
  height: 40px;
  background-color: #4CD964;
  color: #FFFFFF;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px; /* 圆角与容器一致 */
}
</style>